<template>
  <div id="monitor" class="bg-img-cover bg" @mousemove="setSideShow" @contextmenu.self="menuShow">
    <div v-for="(item,index) in marks" :key="index" v-drag="item" 
    @mouseenter="setMarkTipShow(item)" 
    @mouseleave="markTipShow=false"
    @contextmenu="markMenuShow($event,item)">
      <starMark v-bind="item"></starMark>
    </div>
    <div v-show="markTipShow" class="blue-glass" 
    :style="{top:markTip.y-210+'px',left:markTip.x-175+'px',diplay:markTip.show?'block':'none'}">
      {{markTip.title}}
    </div>
    <transition name="fade">
      <div class="left-side" v-if="sideShow">
        <template v-for="(item,index) in sides">
          <div class="blue-side">{{item.title}}</div>
        </template>
      </div>
    </transition>
    <transition name="fade">
      <div class="right-side" v-if="sideShow">
        <template v-for="(item,index) in sides">
          <div class="blue-side">{{item.title}}</div>
        </template>
      </div>
    </transition>
    <StarMenu :e="menu" @on-select="menuSelect" @mouseleave.native="menuHidden">
      <MenuItem name="addMark">增加标志</MenuItem>
      <MenuItem name="screen">全屏</MenuItem>
      <MenuItem name="print">打印</MenuItem>
    </StarMenu>
    <StarMenu :e="markMenu" @mouseleave.native="markMenuHidden">
      <MenuItem name="color"><ColorPicker v-model="markColor"  @on-change="colorUpdate"/></MenuItem>
      <MenuItem name="title"><Input v-model="markTitle"  @on-change="titleUpdate"/></MenuItem>
    </StarMenu>
  </div>
</template>

<script>
import starMark from './mark.vue';
import screenFull from 'screenfull';
export default {
  name:'',
  components: {starMark},
  data() {
    return {
      marks:[
    {
        "title": "我是abc",
        "x": 500,
        "y": 500,
        "width": 50,
        "height": 50,
        "fill": "red"
    },
    {
        "title": "我是def",
        "x": 700,
        "y": 400,
        "width": 50,
        "height": 50,
        "fill": "green"
    },
    {
        "title": "我是ght",
        "x": 800,
        "y": 400,
        "width": 50,
        "height": 50,
        "fill": "blue"
    },
    {
        "title": "我是...",
        "x": 1003.3333282470703,
        "y": 815.6666641235352,
        "width": 50,
        "height": 50,
        "fill": "blue"
    },
    {
        "title": "我是...",
        "x": 1487.3333282470703,
        "y": 691.6666641235352,
        "width": 50,
        "height": 50,
        "fill": "blue"
    },
    {
        "title": "我是...",
        "x": 1603,
        "y": 372,
        "width": 50,
        "height": 50,
        "fill": "#F42D16"
    },
    {
        "title": "我是...wwwww",
        "x": 1275,
        "y": 332,
        "width": 50,
        "height": 50,
        "fill": "#E1361D"
    },
    {
        "title": "我是...",
        "x": 1163,
        "y": 558,
        "width": 50,
        "height": 50,
        "fill": "#F60F03"
    },
    {
        "title": "我是...",
        "x": 2065,
        "y": 386,
        "width": 50,
        "height": 50,
        "fill": "blue"
    },
    {
        "title": "我是...",
        "x": 757,
        "y": 639,
        "width": 50,
        "height": 50,
        "fill": "blue"
    }
],
      markTip:{},
      markTipShow:false,
      markMenu:{
        show:false,
        clientX:0,
        clientY:0
      },
      markColor:'red',
      markTitle:'',
      markTitleTimer:null,
      sideShow:true,
      sideTimer:null,
      sides: [
        {title:'我是abc'},
        {title:'我是def'},
        {title:'我是ght'}
      ],
      menu:{
        show:false,
        clientX:0,
        clientY:0
      }
    };
  },
  props: {},
  watch: {},
  computed: {
    
  },
  created() {},
  mounted() {
    this.setSideShow()
  },
  methods: {
    setSideShow(){
      if(this.sideTimer) clearTimeout(this.sideTimer)
      this.sideShow = true;
      this.sideTimer = setTimeout(()=>{
        this.sideShow = false;
      },5000)
    },
    setMarkTipShow(item){
      this.markTipShow = true;
      this.markTip = item
    },
    markMenuShow(e,item){
      e.preventDefault();
      this.markMenu.clientX = e.clientX;
      this.markMenu.clientY = e.clientY;
      this.$set(this.markMenu,'show' ,true)
      this.markTip = item;
      this.markColor =item.fill;
      this.markTitle =item.title;
    },
    markMenuHidden(e){
      if(this.markTitleTimer) clearTimeout(this.markTitleTimer)
      this.markTitleTimer = setTimeout(()=>{
        this.$set(this.markMenu,'show' ,false)
      },1500)
    },
    colorUpdate(){
      if(this.markTitleTimer) clearTimeout(this.markTitleTimer)
      this.markTip.fill = this.markColor;
      this.markMenuHidden()
    },
    titleUpdate(){
      if(this.markTitleTimer) clearTimeout(this.markTitleTimer)
      this.markTip.title = this.markTitle;
      this.markMenuHidden()
    },
    menuShow(e){
        e.preventDefault();
        this.menu.clientX = e.clientX;
        this.menu.clientY = e.clientY;
        this.$set(this.menu,'show' ,true)
    },
    menuHidden(){
      this.$set(this.menu,'show' ,false)
    },
    menuSelect(name){
      if(name === 'addMark'){
        let pos = this.$el.getBoundingClientRect();
        let mark = {title:'我是...',x:this.menu.clientX-pos.left,y:this.menu.clientY-pos.top,width:50,height:50,fill:'blue'}
        this.marks.push(mark)
        this.$set(this.menu,'show' ,false)
      }else if(name === 'screen'){
          screenFull.request(this.$el);
      }else{
        console.log(this.marks)
      }
    }
  }
};
</script>
<style scoped>
.bg {
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/厂区.png");
  position: relative;
}
.blue-glass {
  /* display: none; */
  width: 400px;
  height: 200px;
  position: absolute;
  background-color: rgba(100, 149, 237, 0.5); /* 半透明的蓝色背景 */
  backdrop-filter: blur(5px); /* 应用模糊效果 */
  border-radius: 10px; /* 圆角边框 */
  padding: 20px; /* 内边距 */
  color:white;
  font-size: 20px;
}
.blue-side {
  /* display: none; */
  width: 250px;
  height: 300px;
  background-color: rgba(100, 149, 237, 0.5); /* 半透明的蓝色背景 */
  border-radius: 10px; /* 圆角边框 */
  padding: 20px; /* 内边距 */
  color:white;
  font-size: 20px;
}
.left-side {
  position: absolute;
  left: 0px;
  top:0px;
  justify-content: space-between;
  padding:20px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.right-side {
  position: absolute;
  right: 0px;
  top:0px;
  justify-content: space-between;
  padding:20px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 4s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>